<template>
  <div class="dashboard-container">
    <div class="dashboard-text" style="background-color: #e4e8eb">
      <el-row :gutter="20" style="padding: 20px" type="flex">
        <!-- 第一列 -->
        <el-col :span="5">
          <!-- 第一个盒子 -->
          <div class="grid-content" style="background-color: #f56c6c; margin-bottom: 20px">
            <div class="left">
              <div style="height: 120px">
                <i class="el-icon-user" style=" font-size: 60px; line-height: 120px; margin-right: 20px; " />
              </div>
            </div>
            <div class="right">
              <p>管理员用户</p>
              <p>5名</p>
            </div>
          </div>
          <!-- 第二个盒子 -->
          <div
            class="grid-content"
            style="background-color: #5470c6; margin-bottom: 20px"
          >
            <div class="left">
              <div style="height: 120px">
                <i
                  class="el-icon-user"
                  style="
                    font-size: 60px;
                    line-height: 120px;
                    margin-right: 20px;
                  "
                />
              </div>
            </div>
            <div class="right">
              <p>管理员用户</p>
              <p>5名</p>
            </div>
          </div>
          <!-- 第三个盒子 -->
          <div class="grid-content" style="background-color: #ffffff; margin-bottom: 20px">
            <el-tabs v-model="activeName">
              <el-tab-pane label="助教" name="first">
                <!-- 图表 -->
                <div class="chart">
                  <div ref="chart1" style="width: 200px; height: 300px" />
                </div>
              </el-tab-pane>
              <el-tab-pane label="班主任" name="second">
                <!-- 图表 -->
                <div class="chart">
                  <div ref="chart2" style="width: 200px; height: 300px" />
                </div>
              </el-tab-pane>
            </el-tabs>
          </div>
          <!-- 第四个盒子 -->
          <div
            class="grid-content"
            style="background-color: #ffffff; margin-bottom: 20px"
          >
            <!-- 图表 -->
            <div class="chart">
              <div ref="chart3" style="width: 200px; height: 200px" />
            </div>
          </div>
        </el-col>

        <!-- 第二列 -->
        <el-col :span="14">
          <!-- 第一个盒子 -->
          <div class="grid-content" style="width: 100%; margin-bottom: 20px;">
            <!-- 图表 -->
            <div class="chart" style="width: 100%; height: 635px">
              <div ref="chart4" style="width: 100%; height: 635px" />
            </div>
          </div>
          <!-- 第二个盒子 -->
          <div class="grid-content" style="background-color: #fff">
            <!-- 图表 -->
            <div class="chart">
              <div ref="chart5" class="chart5" style="width: 730px; height: 200px" />
            </div>
          </div>
        </el-col>

        <!-- 第三列 -->
        <el-col :span="5">
          <!-- 第一个盒子 -->
          <div
            class="grid-content"
            style="background-color: #3dba82; margin-bottom: 20px"
          >
            <div class="left">
              <div style="height: 120px">
                <i
                  class="el-icon-user"
                  style="
                    font-size: 60px;
                    line-height: 120px;
                    margin-right: 20px;
                  "
                />
              </div>
            </div>
            <div class="right">
              <p>学科数量</p>
              <p>10科</p>
            </div>
          </div>
          <!-- 第二个盒子 -->
          <div
            class="grid-content"
            style="background-color: #419eff; margin-bottom: 20px"
          >
            <div class="left">
              <div style="height: 120px">
                <i
                  class="el-icon-user"
                  style="
                    font-size: 60px;
                    line-height: 120px;
                    margin-right: 20px;
                  "
                />
              </div>
            </div>
            <div class="right">
              <p>班级数量</p>
              <p>3个</p>
            </div>
          </div>
          <!-- 第三个盒子 -->
          <div
            class="grid-content"
            style="background-color: #ffffff; margin-bottom: 20px"
          >
            <el-tabs v-model="activeName">
              <el-tab-pane label="老师" name="first">
                <!-- 图表 -->
                <div class="chart">
                  <div ref="chart6" style="width: 200px; height: 300px" />
                </div>
              </el-tab-pane>
              <el-tab-pane label="班级" name="second">
                <!-- 图表 -->
                <div class="chart">
                  <div ref="chart7" style="width: 200px; height: 300px" />
                </div>
              </el-tab-pane>
            </el-tabs>
          </div>
          <!-- 第四个盒子 -->
          <div
            class="grid-content"
            style="background-color: #ffffff; margin-bottom: 20px"
          >
            <!-- 图表 -->
            <div class="chart">
              <div ref="chart8" style="width: 200px; height: 200px">111</div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import $ from 'jquery'
import { mapGetters } from 'vuex'
import chinaJson from '@/utils/china'
import * as echarts from 'echarts/core' // 引入echarts核心包
import { GridComponent, TooltipComponent, LegendComponent } from 'echarts/components' // 引入折线图需要的组件GridComponent直角坐标系的组件
import { LineChart, PieChart, BarChart, RadarChart } from 'echarts/charts' // 引入折线图的图标
import { UniversalTransition, LabelLayout } from 'echarts/features' // 引入全局过渡动画
import { CanvasRenderer } from 'echarts/renderers' // 引入canvas渲染器
// 注册必须使用的组件
echarts.use([
  GridComponent,
  LineChart,
  CanvasRenderer,
  UniversalTransition,
  TooltipComponent,
  LegendComponent,
  PieChart,
  LabelLayout,
  BarChart,
  RadarChart
])

export default {
  name: 'Dashboard',
  data() {
    return {
      homeData: {}, // 存放首页的数据对象
      activeName: 'first'
    }
  },
  computed: {
    ...mapGetters(['name'])
  },
  watch: {},
  mounted() {
    // this.myChart = echarts.init(this.$refs.chart1)
    // 第一列的第一个图和第二个图
    echarts.init(this.$refs.chart1).setOption({
      color: ['#ffd285', '#ff733f'],
      grid: {
        left: '2%', // 离容器左侧的距离
        right: '6%', // 离容器右侧的距离
        top: '4%', // 离容器上面的距离
        bottom: '6%', // 离容器下面的距离
        containLabel: true // 是否包含坐标轴的刻度标签。
      },
      xAxis: {
        type: 'category',
        axisLine: {
          // x轴坐标轴线设置颜色
          lineStyle: {
            color: '#cccccc' // (最下面的横线)的颜色
          }
        },
        axisTick: {
          // 是否显示坐标刻度
          show: true,
          lineStyle: {
            color: '#333' // 刻度的颜色
          }
        },
        axisLabel: {
          // 坐标轴刻度标签的相关设置。
          textStyle: {
            // 刻度标签文字的颜色
            color: '#333'
          }
        },
        boundaryGap: false, // 坐标轴两边留白策略
        data: ['周一', '周二', '周三', '周四']
      },
      yAxis: {
        axisLine: {
          show: true, // 是否显示坐标轴线
          lineStyle: {
            color: '#333'
          }
        },
        axisTick: {
          show: true // 是否显示坐标轴线刻度
        },
        type: 'value'
      },
      series: [
        // 配置的是Y轴的数据
        {
          name: '标准版',
          smooth: true,
          type: 'line',
          symbolSize: 8,
          symbol: 'circle',
          data: [70, 50, 50, 87]
        },
        {
          name: '潍V',
          smooth: true,
          type: 'line',
          symbolSize: 8,
          symbol: 'circle',
          data: [290, 200, 20, 132]
        }
      ]
    })
    echarts.init(this.$refs.chart2).setOption({
      color: ['#ffd285', '#ff733f'],
      grid: {
        left: '2%', // 离容器左侧的距离
        right: '6%', // 离容器右侧的距离
        top: '4%', // 离容器上面的距离
        bottom: '6%', // 离容器下面的距离
        containLabel: true // 是否包含坐标轴的刻度标签。
      },
      xAxis: {
        type: 'category',
        axisLine: {
          // x轴坐标轴线设置颜色
          lineStyle: {
            color: '#cccccc' // (最下面的横线)的颜色
          }
        },
        axisTick: {
          // 是否显示坐标刻度
          show: true,
          lineStyle: {
            color: '#333' // 刻度的颜色
          }
        },
        axisLabel: {
          // 坐标轴刻度标签的相关设置。
          textStyle: {
            // 刻度标签文字的颜色
            color: '#333'
          }
        },
        boundaryGap: false, // 坐标轴两边留白策略
        data: ['周一', '周二', '周三', '周四']
      },
      yAxis: {
        axisLine: {
          show: true, // 是否显示坐标轴线
          lineStyle: {
            color: '#333'
          }
        },
        axisTick: {
          show: true // 是否显示坐标轴线刻度
        },
        type: 'value'
      },
      series: [
        // 配置的是Y轴的数据
        {
          name: '标准版',
          smooth: true,
          type: 'line',
          symbolSize: 8,
          symbol: 'circle',
          data: [70, 50, 50, 87]
        },
        {
          name: '潍V',
          smooth: true,
          type: 'line',
          symbolSize: 8,
          symbol: 'circle',
          data: [290, 200, 20, 132]
        }
      ]
    })
    // 第一列第三个图
    echarts.init(this.$refs.chart3).setOption({
      tooltip: {
        // 提示框组件
        trigger: 'item' // 触发类型,'item'数据项图形触发
      },
      legend: {
        // 设置图例位置
        top: '5%',
        left: 'left',
        itemGap: 8 // 设置间距
      },
      series: [
        {
          name: 'Access From',
          type: 'pie',
          radius: ['40%', '70%'],
          avoidLabelOverlap: false,
          label: {
            show: false,
            position: 'center'
          },
          labelLine: {
            show: false
          },
          data: [
            { value: 580, name: '任娜' },
            { value: 484, name: '白勇' },
            { value: 300, name: '薛秀英' }
          ]
        }
      ]
    })
    // 第二列第一个图
    this.chinaEcharts()
    // 第二列第二个图
    echarts.init(this.$refs.chart5).setOption({
      title: {
        show: true,
        text: '文章点击量',
        left: 'center'
        // height: 30
      },
      grid: {
        bottom: 30,
        height: '66%',
        left: '13%'
      },
      xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          data: [120, 200, 150, 80, 70, 110, 130],
          type: 'bar'
        }
      ]
    })
    // 第三列第一个和第二个图
    echarts.init(this.$refs.chart6).setOption({
      legend: {},
      radar: [
        {
          indicator: [
            { text: '1' },
            { text: '2' },
            { text: '3' },
            { text: '4' },
            { text: '5' }
          ],
          center: ['50%', '50%'], // 位置
          radius: 80, // 缩放
          startAngle: 90,
          splitNumber: 4,
          shape: 'circle',
          axisName: {
            formatter: '【{value}】',
            color: '#428BD4'
          },
          splitArea: {
            areaStyle: {
              color: ['#77EADF', '#26C3BE', '#64AFE9', '#428BD4'],
              shadowColor: 'rgba(0, 0, 0, 0.2)',
              shadowBlur: 10
            }
          },
          axisLine: {
            lineStyle: {
              color: 'rgba(211, 253, 250, 0.8)'
            }
          },
          splitLine: {
            lineStyle: {
              color: 'rgba(211, 253, 250, 0.8)'
            }
          }
        }
      ],
      series: [
        {
          type: 'radar',
          emphasis: {
            lineStyle: {
              width: 4
            }
          },
          data: [
            {
              value: [100, 8, 0.4, -80, 2000],
              name: ' A'
            },
            {
              value: [60, 5, 0.3, -100, 1500],
              name: ' B',
              areaStyle: {
                color: 'rgba(255, 228, 52, 0.6)'
              }
            }
          ]
        }
      ]
    })
    echarts.init(this.$refs.chart7).setOption({
      legend: {},
      radar: [
        {
          indicator: [
            { text: 'Indicator1' },
            { text: 'Indicator2' },
            { text: 'Indicator3' },
            { text: 'Indicator4' },
            { text: 'Indicator5' }
          ],
          center: ['50%', '50%'], // 位置
          radius: 80, // 缩放
          startAngle: 90,
          splitNumber: 4,
          shape: 'circle',
          axisName: {
            formatter: '【{value}】',
            color: '#428BD4'
          },
          splitArea: {
            areaStyle: {
              color: ['#77EADF', '#26C3BE', '#64AFE9', '#428BD4'],
              shadowColor: 'rgba(0, 0, 0, 0.2)',
              shadowBlur: 10
            }
          },
          axisLine: {
            lineStyle: {
              color: 'rgba(211, 253, 250, 0.8)'
            }
          },
          splitLine: {
            lineStyle: {
              color: 'rgba(211, 253, 250, 0.8)'
            }
          }
        }
      ],
      series: [
        {
          type: 'radar',
          emphasis: {
            lineStyle: {
              width: 4
            }
          },
          data: [
            {
              value: [100, 8, 0.4, -80, 2000],
              name: 'Data A'
            },
            {
              value: [60, 5, 0.3, -100, 1500],
              name: 'Data B',
              areaStyle: {
                color: 'rgba(255, 228, 52, 0.6)'
              }
            }
          ]
        }
      ]
    })
    // 第三例第三个图
    echarts.init(this.$refs.chart8).setOption({
      tooltip: {
        // 提示框组件
        trigger: 'item' // 触发类型,'item'数据项图形触发
      },
      legend: {
        // 设置图例位置
        top: '5%',
        left: 'left',
        itemGap: 8 // 设置间距
      },
      series: [
        {
          name: 'Access From',
          type: 'pie',
          radius: ['40%', '70%'],
          avoidLabelOverlap: false,
          label: {
            show: false,
            position: 'center'
          },
          labelLine: {
            show: false
          },
          data: [
            { value: 580, name: '任娜' },
            { value: 484, name: '白勇' },
            { value: 300, name: '薛秀英' }
          ]
        }
      ]
    })
  },
  methods: {
    chinaEcharts() {
      // 使用 "chinaJson" 数据注册一个名为 "china" 的地图
      this.$echarts.registerMap('china', chinaJson)
      // 初始化一个 ECharts 实例
      const myChart = this.$echarts.init(this.$refs.chart4)
      window.addEventListener('resize', function() {
        myChart.resize()
      })
      // window.addEventListener('resize', function() {
      //   myChart.resize();
      // });
      // window.onresize = function () {
      //   productChart.resize();
      // };
      // 指定配置项

      var uploadedDataURL = 'https://geo.datav.aliyun.com/areas_v3/bound/100000_full.json'
      var geoGpsMap = {
        1: [127.9688, 45.368],
        2: [116.4551, 40.2539],
        3: [109.1162, 34.2004],
        4: [113.12244, 23.009505],
        5: [87.9236, 43.5883],
        6: [91.11, 29.97]
      }
      var geoCoordMap = {
        台湾: [121.5135, 25.0308],
        黑龙江: [127.9688, 45.368],
        内蒙古: [110.3467, 41.4899],
        吉林: [125.8154, 44.2584],
        北京市: [116.4551, 40.2539],
        辽宁: [123.1238, 42.1216],
        河北: [114.4995, 38.1006],
        天津: [117.4219, 39.4189],
        山西: [112.3352, 37.9413],
        陕西: [109.1162, 34.2004],
        甘肃: [103.5901, 36.3043],
        宁夏: [106.3586, 38.1775],
        青海: [101.4038, 36.8207],
        新疆: [87.9236, 43.5883],
        西藏: [91.11, 29.97],
        四川: [103.9526, 30.7617],
        重庆: [108.384366, 30.439702],
        山东: [117.1582, 36.8701],
        河南: [113.4668, 34.6234],
        江苏: [118.8062, 31.9208],
        安徽: [117.29, 32.0581],
        湖北: [114.3896, 30.6628],
        浙江: [119.5313, 29.8773],
        福建: [119.4543, 25.9222],
        江西: [116.0046, 28.6633],
        湖南: [113.0823, 28.2568],
        贵州: [106.6992, 26.7682],
        云南: [102.9199, 25.4663],
        广东: [113.12244, 23.009505],
        广西: [108.479, 23.1152],
        海南: [110.3893, 19.8516],
        上海: [121.4648, 31.2891]
      }
      var colors = [
        [
          '#1DE9B6',
          '#F46E36',
          '#04B9FF',
          '#5DBD32',
          '#FFC809',
          '#FB95D5',
          '#BDA29A',
          '#6E7074',
          '#546570',
          '#C4CCD3'
        ],
        [
          '#37A2DA',
          '#67E0E3',
          '#32C5E9',
          '#9FE6B8',
          '#FFDB5C',
          '#FF9F7F',
          '#FB7293',
          '#E062AE',
          '#E690D1',
          '#E7BCF3',
          '#9D96F5',
          '#8378EA',
          '#8378EA'
        ],
        [
          '#DD6B66',
          '#759AA0',
          '#E69D87',
          '#8DC1A9',
          '#EA7E53',
          '#EEDD78',
          '#73A373',
          '#73B9BC',
          '#7289AB',
          '#91CA8C',
          '#F49F42'
        ]
      ]
      var colorIndex = 0
      $(function() {
        var year = ['2019', '2020', '2021', '2022', '2023']
        var mapData = [[], [], [], [], [], []]

        /* 柱子Y名称*/
        var categoryData = []
        var barData = []
        for (var key in geoCoordMap) {
          categoryData.push(key)
          mapData[0].push({
            year: '2019',
            name: key,
            value: randomNum(100, 300)
          })
          mapData[1].push({
            year: '2020',
            name: key,
            value: randomNum(100, 300)
          })
          mapData[2].push({
            year: '2021',
            name: key,
            value: randomNum(100, 300)
          })
          mapData[3].push({
            year: '2022',
            name: key,
            value: randomNum(100, 300)
          })
          mapData[4].push({
            year: '2023',
            name: key,
            value: randomNum(100, 300)
          })
        }
        for (var i = 0; i < mapData.length; i++) {
          barData.push([])
          for (var j = 0; j < mapData[i].length; j++) {
            barData[i].push(mapData[i][j].value)
          }
        }
        $.getJSON(uploadedDataURL, function(geoJson) {
          echarts.registerMap('china', geoJson)
          var convertData = function(data) {
            var res = []
            for (var i = 0; i < data.length; i++) {
              var geoCoord = geoCoordMap[data[i].name]
              if (geoCoord) {
                res.push({
                  name: data[i].name,
                  value: geoCoord.concat(data[i].value)
                })
              }
            }
            return res
          }

          var convertToLineData = function(data, gps) {
            var res = []
            for (var i = 0; i < data.length; i++) {
              var dataItem = data[i]
              var fromCoord = geoCoordMap[dataItem.name]
              debugger
              var toCoord = gps // 郑州
              //  var toCoord = geoGps[Math.random()*3];
              if (fromCoord && toCoord) {
                res.push([
                  {
                    coord: fromCoord,
                    value: dataItem.value
                  },
                  {
                    coord: toCoord
                  }
                ])
              }
            }
            return res
          }

          var optionXyMap01 = {
            timeline: {
              data: year,
              axisType: 'category',
              autoPlay: true,
              playInterval: 3000,
              left: '10%',
              right: '10%',
              bottom: '3%',
              width: '80%',
              //  height: null,
              label: {
                normal: {
                  textStyle: {
                    color: '#ddd'
                  }
                },
                emphasis: {
                  textStyle: {
                    color: '#fff'
                  }
                }
              },
              symbolSize: 10,
              lineStyle: {
                color: '#555'
              },
              checkpointStyle: {
                borderColor: '#777',
                borderWidth: 2
              },
              controlStyle: {
                showNextBtn: true,
                showPrevBtn: true,
                normal: {
                  color: '#666',
                  borderColor: '#666'
                },
                emphasis: {
                  color: '#aaa',
                  borderColor: '#aaa'
                }
              }
            },
            baseOption: {
              animation: true,
              animationDuration: 1000,
              animationEasing: 'cubicInOut',
              animationDurationUpdate: 1000,
              animationEasingUpdate: 'cubicInOut',
              grid: {
                right: '1%',
                top: '15%',
                bottom: '10%',
                width: '20%'
              },
              tooltip: {
                trigger: 'axis', // hover触发器
                axisPointer: {
                  // 坐标轴指示器，坐标轴触发有效
                  type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
                  shadowStyle: {
                    color: 'rgba(150,150,150,0.1)' // hover颜色
                  }
                }
              },
              geo: {
                // show: true,
                map: 'china',
                roam: true,
                zoom: 1,
                center: [113.83531246, 34.0267395887],
                label: {
                  emphasis: {
                    show: false
                  }
                },
                itemStyle: {
                  normal: {
                    borderColor: 'rgba(147, 235, 248, 1)',
                    borderWidth: 1,
                    areaColor: {
                      type: 'radial',
                      x: 0.5,
                      y: 0.5,
                      r: 0.8,
                      colorStops: [
                        {
                          offset: 0,
                          color: 'rgba(147, 235, 248, 0)' // 0% 处的颜色
                        },
                        {
                          offset: 1,
                          color: 'rgba(147, 235, 248, .2)' // 100% 处的颜色
                        }
                      ],
                      globalCoord: false // 缺省为 false
                    },
                    shadowColor: 'rgba(128, 217, 248, 1)',
                    // shadowColor: 'rgba(255, 255, 255, 1)',
                    shadowOffsetX: -2,
                    shadowOffsetY: 2,
                    shadowBlur: 10
                  },
                  emphasis: {
                    areaColor: '#389BB7',
                    borderWidth: 0
                  }
                }
              }
            },
            options: []
          }
          for (var n = 0; n < year.length; n++) {
            optionXyMap01.options.push({
              backgroundColor: '#051b4a',
              title: [
                {
                  /* text: '地图',
                         subtext: '内部数据请勿外传',
                         left: 'center',
                         textStyle: {
                             color: '#fff'
                         }*/
                },
                {
                  id: 'statistic',
                  text: year[n] + '年数据统计情况',
                  left: '53%',
                  top: '6%',
                  textStyle: {
                    color: '#fff',
                    fontSize: 30
                  }
                }
              ],
              xAxis: {
                type: 'value',
                scale: true,
                position: 'top',
                min: 0,
                boundaryGap: false,
                splitLine: {
                  show: false
                },
                axisLine: {
                  show: false
                },
                axisTick: {
                  show: false
                },
                axisLabel: {
                  margin: 2,
                  textStyle: {
                    color: '#aaa'
                  }
                }
              },
              yAxis: {
                type: 'category',
                //  name: 'TOP 20',
                nameGap: 16,
                axisLine: {
                  show: true,
                  lineStyle: {
                    color: '#ddd'
                  }
                },
                axisTick: {
                  show: false,
                  lineStyle: {
                    color: '#ddd'
                  }
                },
                axisLabel: {
                  interval: 0,
                  textStyle: {
                    color: '#ddd'
                  }
                },
                data: categoryData
              },
              series: [
                // 未知作用
                {
                  // 文字和标志
                  name: 'light',
                  type: 'scatter',
                  coordinateSystem: 'geo',
                  data: convertData(mapData[n]),
                  symbolSize: function(val) {
                    return val[2] / 10
                  },
                  label: {
                    normal: {
                      formatter: '{b}',
                      position: 'right',
                      show: true
                    },
                    emphasis: {
                      show: true
                    }
                  },
                  itemStyle: {
                    normal: {
                      color: colors[colorIndex][n]
                    }
                  }
                },
                // 地图？
                {
                  type: 'map',
                  map: 'china',
                  geoIndex: 0,
                  // roam: scale,
                  aspectScale: 0.75, // 长宽比
                  showLegendSymbol: false, // 存在legend时显示
                  label: {
                    normal: {
                      show: false
                    },
                    emphasis: {
                      show: false,
                      textStyle: {
                        color: '#fff'
                      }
                    }
                  },
                  roam: true,
                  itemStyle: {
                    normal: {
                      areaColor: '#031525',
                      borderColor: '#FFFFFF'
                    },
                    emphasis: {
                      areaColor: '#2B91B7'
                    }
                  },
                  animation: false,
                  data: mapData
                },
                // 地图点的动画效果
                {
                  //  name: 'Top 5',
                  type: 'effectScatter',
                  coordinateSystem: 'geo',
                  data: convertData(
                    mapData[n]
                      .sort(function(a, b) {
                        return b.value - a.value
                      })
                      .slice(0, 20)
                  ),
                  symbolSize: function(val) {
                    return val[2] / 10
                  },
                  showEffectOn: 'render',
                  rippleEffect: {
                    brushType: 'stroke'
                  },
                  hoverAnimation: true,
                  label: {
                    normal: {
                      formatter: '{b}',
                      position: 'right',
                      show: true
                    }
                  },
                  itemStyle: {
                    normal: {
                      color: colors[colorIndex][n],
                      shadowBlur: 10,
                      shadowColor: colors[colorIndex][n]
                    }
                  },
                  zlevel: 1
                },
                // 地图线的动画效果
                {
                  type: 'lines',
                  zlevel: 2,
                  effect: {
                    show: true,
                    period: 4, // 箭头指向速度，值越小速度越快
                    trailLength: 0.02, // 特效尾迹长度[0,1]值越大，尾迹越长重
                    symbol: 'arrow', // 箭头图标
                    symbolSize: 3 // 图标大小
                  },
                  lineStyle: {
                    normal: {
                      color: colors[colorIndex][n],
                      width: 0.1, // 尾迹线条宽度
                      opacity: 0.5, // 尾迹线条透明度
                      curveness: 0.3 // 尾迹线条曲直度
                    }
                  },
                  data: convertToLineData(
                    mapData[n],
                    geoGpsMap[Math.ceil(Math.random() * 6)]
                  )
                },
                // 柱状图
                {
                  zlevel: 1.5,
                  type: 'bar',
                  symbol: 'none',
                  itemStyle: {
                    normal: {
                      color: colors[colorIndex][n]
                    }
                  },
                  data: barData[n]
                }
              ]
            })
          }
          // window.addEventListener('resize', () => {
          //   setTimeout(() => {
          //     myChart.resize()
          //   }, 500)
          // })
          // this.myChart.resize()
          // window.addEventListener('resize', () => {
          //   this.myChart.resize()
          // })
          // window.onresize = function() {
          //   myChart.resize()
          // }
          // window.onresize = myChart.resize;

          // 使用刚指定的配置项和数据显示图表
          myChart.setOption(optionXyMap01)
        })
      })
      function randomNum(minNum, maxNum) {
        switch (arguments.length) {
          case 1:
            return parseInt(Math.random() * minNum + 1, 10)
            // break
          case 2:
            return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10)
            // break
          default:
            return 0
            // break
        }
      }
    }

  }
}
</script>

<style lang="scss" scoped>
.el-col {
  border-radius: 4px;
}
.grid-content {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 4px;
}
</style>

